<div
  #find
  class="x-find"
  [class.x-flex]="justify || align || direction"
  [class.x-checked]="value"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <div class="x-find-row">
    <x-button #buttonCom icon="fto-search" [disabled]="disabled" (click)="showModal()"></x-button>
    <div class="x-find-tags">
      <ng-container *ngIf="multiple; else singleTpl">
        <x-tag *ngFor="let item of value; index as i; trackBy: trackByItem" closable [disabled]="disabled" (close)="tagClose(i)">{{
          item[columnLabel]
        }}</x-tag>
      </ng-container>
      <ng-template #singleTpl>
        <x-tag *ngIf="value" closable [disabled]="disabled" (close)="tagClose()">{{ value[columnLabel] }}</x-tag>
      </ng-template>
    </div>
  </div>
</div>

<x-dialog
  #dialogCom
  [title]="dialogTitle"
  [width]="dialogWidth"
  [height]="dialogHeight"
  [buttonsCenter]="dialogButtonsCenter"
  [(visible)]="dialogVisible"
  (visibleChange)="dialogVisibleChange.emit($event)"
  (closeDone)="dialogCloseDone()"
  (cancel)="closeModal()"
  (close)="closeModal()"
  (confirm)="sure()"
>
  <div class="x-find-dialog" [class.x-find-dialog-tree-table]="hasTable && hasTree">
    <div class="x-find-dialog-tree" *ngIf="hasTree" #treeRef [style.height.px]="hasTreeTable && multiple && height">
      <x-tree
        #treeCom
        [data]="treeData"
        nodeHeight="1.8"
        [(manual)]="dialogVisible"
        [activatedId]="treeActivatedId"
        [expandedLevel]="treeExpandedLevel"
        (activatedChange)="treeActivatedClick($event)"
        [checkbox]="hasTreeMultiple"
        [checked]="treeChecked"
        (checkboxChange)="treeCheckboxChange($event)"
        [levelCheck]="!hasTreeMultiple"
      ></x-tree>
    </div>
    <div class="x-find-dialog-table" *ngIf="hasTable" #tableRef>
      <div class="x-find-search" *ngIf="hasSearch">
        <x-input [label]="search.label" direction="row" (xKeydown)="searchKeyDown($event);" [(ngModel)]="search.value"></x-input>
        <x-button type="primary" plain (click)="searchClick()">{{search.button || '查询'}}</x-button>
      </div>
      <x-table
        #tableCom
        [data]="tableData"
        [columns]="tableColumns"
        [(manual)]="dialogVisible"
        [(index)]="tableIndex"
        [(size)]="tableSize"
        [query]="tableQuery"
        [total]="tableTotal"
        [allowSelectRow]="!multiple"
        [checkedRow]="tableCheckedRow"
        [loading]="tableLoading"
        (indexChange)="tableIndexChange.emit($event)"
        (sortChange)="tableSortChange.emit($event)"
        [(activatedRow)]="tableActivatedRow"
        (activatedRowChange)="tableActivatedRowChange($event)"
        [rowHeight]="tableRowHeight"
        [bodyHeight]="tableBodyHeight"
        [virtualScroll]="tableVirtualScroll"
        [minBufferPx]="tableMinBufferPx"
        [maxBufferPx]="tableMaxBufferPx"
        [adaptionHeight]="tableAdaptionHeight"
        [docPercent]="tableDocPercent"
      ></x-table>
    </div>
    <div *ngIf="multiple" class="x-find-dialog-checked" [class.x-find-empty]="getEmpty" [style.height.px]="height">
      <x-empty *ngIf="getEmpty" content="请选择数据"></x-empty>
      <div class="x-find-dialog-tags">
        <x-tag *ngFor="let item of temp; index as i; trackBy: trackByItem" closable (close)="tempClose(i, item)">
          <span>{{ item[columnLabel] }}</span>
        </x-tag>
      </div>
    </div>
  </div>
</x-dialog>

<ng-template #treeLabelTpl let-node="$node">
  <div class="x-find-dialog-tree-node">
    <span>{{ node.label }} </span>
    <x-icon type="fto-check" *ngIf="node.$checked"></x-icon>
  </div>
</ng-template>
